<template>
	<view class="body">
		<!-- <view class="card" v-for="(item,index) in userList" @tap="changeUrl(item.familyName, item.nameType, item.sex)">
			<view class="left_card">
				<image :src="item.sex == 1 ? getImgUrl('/img/wshing/nansheng.png') : getImgUrl('/img/wshing/nvsheng.png')" mode="" class="img"></image>
				<view class="right_ft">
					<view class="font">
						{{item.familyName}}·{{ item.nameType == 0 ? '单字名':'双字名' }}
					</view>
					<view class="btn_ft">
						<text>{{item.sex == 1 ? '男' : '女'}}</text>
						<text class="birthday">{{item.birthday}}</text>
					</view>
				</view>
			</view>
			
		</view> -->
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item,index) in userList"
				@click="changeUrl(item.name, item.nameType, item.sex,$event,item.id,index)" :right-options="options2">
				<view class="slot-button" @click="update(item.name, item.nameType, item.sex,$event,item.id,index)">
					<view class="right_ft">
						<image
							:src="item.sex == 1 ? getImgUrl('/img/wshing/nansheng.png') : getImgUrl('/img/wshing/nvsheng.png')"
							mode="" class="img"></image>
						<view class="" style="padding-left: 30rpx;">
							<view class="font">
									{{item.name}}
							</view>
							<view class="btn_ft">
								<text>{{item.sex == 1 ? '男' : '女'}}</text>
								<text class="birthday">{{item.birthday}}</text>
							</view>
						</view>

					</view>
					<view class="">
						<uni-icons custom-prefix="right" type="right" size="25"></uni-icons>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="提示" content="确定要删除吗?"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
		<view v-if="show">
			<no-more></no-more>
		</view>
	</view>
</template>

<script>
	import {
			glyphomancylist
	} from '@/utils/OnetoOneaApi.js';
	import {
		glyphomancydel
	} from '@/utils/api.js'
	import {
		imgBaseUrl
	} from '@/utils/baseUrl.js'
	import noMore from '../../../components/no-data/no-more.vue'
	export default {
		components:{noMore},
		data() {
			return {
				show: false,
				userList: [],
				pageNo: 1,
				options2: [
					{
						text: '删除',
						style: {
							color: '#000000',
							backgroundColor: '#F56C6C'
						}
					}
				],
				id:'',
				idx:''
			}
		},
		onReachBottom() {
			this.pageNo+1
			this.dataList()
		},
		onHide(){
			this.show = false
		},
		async onLoad() {
			this.dataList()
		},
		methods: {
			async dataList() {
				const userInfo = uni.getStorageSync('userInfo')
				const res = await glyphomancylist(userInfo.id,this.pageNo);
				if(res.result.records.length == 0){
					this.show = true
				}
				this.userList = [...this.userList, ...res.result.records]
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			//向左滑动事件
			changeUrl(name, nameType, sex, e,id,index) {
				if (e.content.text == '删除') {
					this.$refs.alertDialog.open()
					this.id = id
					this.idx = index

				}
			},
			//查看事件
			update(name, nameType, sex, e,id,index){
				uni.navigateTo({
				url: `../../../subPackagesA/pages/glyphomancyDetail/glyphomancyDetail?name=${name}&sexVls=${sex}&show=12`
				})
			},
			//删除事件
			async dialogConfirm() {
				console.log(this.idx,this.id,'==============');
				const result = await glyphomancydel(this.id)
				this.userList.splice(this.idx,1)
				if(result.code == 200)
				{
					uni.showToast({
						title: '删除成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.body {
		width: 100%;
		// height: 100vh;
		background: #F5F5F5;
		display: flex;
		// justify-content: center;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;

		.slot-button {
			height: 165rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			width: 90vw;
			padding: 20rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;



			.right_ft {
				margin-left: 20rpx;
				letter-spacing: 2rpx;
				display: flex;
				align-items: center;

				.img {
					width: 104rpx;
					height: 104rpx;
					border-radius: 50%;
				}

				.font {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 62rpx;
				}

				.btn_ft {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;

					.birthday {
						margin-left: 10rpx;
					}
				}
			}
		}
	/deep/ .uni-swipe_button-group{
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			position: absolute;
			top: 11px;
			bottom: 0;
		}
		.card {
			width: 90%;
			height: 168rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left_card {
				display: flex;
				align-items: center;


			}
		}
	}
</style>
<style>
page{
	background: #F5F5F5;
}
</style>